﻿<template>
  <div class="default_card_container">

    <new_header></new_header>
    <div class="default_card_main">
      <div class="page_num">
        {{num}}/5
      </div>
      <div class="default_card_main_inner">
        <div class="default_card_main_title"  :style="{opacity:opacity_data}">
          给冒险者的<span style="color:#e96100">礼物</span>
        </div>
        <div class="wrap_card_show">
          <no_main_default_card  v-show="!!opacity_data && no_empty"></no_main_default_card>
          <default_card_show_1 v-show="!opacity_data"></default_card_show_1>
          <main_default_card v-show="!!opacity_data && !no_empty"></main_default_card>
        </div>

        <!--select s-->
        <ul class="default_card_inner_bottom_select clearfix">
          <li v-on:click="change_sel(0)">
            <img src="../../../static/img/p_1.png" alt="" class="sel_nor sel_1" v-show="!sel_show_list[0]">
            <img src="../../../static/img/p_2.png" alt="" class="sel_nor sel_1_act" v-show="sel_show_list[0]">
            <p class="sel_name" :class="{'sel_name_act':sel_show_list[0]}">
              资料
            </p>
          </li>
          <li v-on:click="change_sel(1)">
            <img src="../../../static/img/g_1.png" alt="" class="sel_nor sel_1" v-show="!sel_show_list[1]">
            <img src="../../../static/img/g_2.png" alt="" class="sel_nor sel_1_act" v-show="sel_show_list[1]">
            <p class="sel_name " :class="{'sel_name_act':sel_show_list[1]}">
              礼物
            </p>
          </li>
          <li class="yued" v-on:click="change_sel(2)">
            <img src="../../../static/img/d_1.png" alt="" class="sel_nor sel_1 yued"  v-show="!sel_show_list[2]">
            <img src="../../../static/img/d_2.png" alt="" class="sel_nor sel_1_act yued"  v-show="sel_show_list[2]">
            <p class="sel_name" :class="{'sel_name_act':sel_show_list[2]}">
              约定
            </p>
          </li>
          <li class="wish" v-on:click="change_sel(3)">
            <img src="../../../static/img/m_1.png" alt="" class="sel_nor sel_1 wish" v-show="!sel_show_list[3]">
            <img src="../../../static/img/m_2.png" alt="" class="sel_nor sel_1_act wish" v-show="sel_show_list[3]">
            <p class="sel_name" :class="{'sel_name_act':sel_show_list[3]}">
              愿望
            </p>
          </li>
          <li class="skill" v-on:click="change_sel(4)">
            <img src="../../../static/img/w_1.png" alt="" class="sel_nor sel_1 skill" v-show="!sel_show_list[4]">
            <img src="../../../static/img/w_2.png" alt="" class="sel_nor sel_1_act skill" v-show="sel_show_list[4]">
            <p class="sel_name" :class="{'sel_name_act':sel_show_list[4]}">
              技能
            </p>
          </li>
        </ul>
        <!--select e-->
      </div>

      <div class="default_card_container_bottom">
        <img class="df_c_b_close" src="../../../static/img/default_iocn_1.jpg">
        <img class="default_bot_bt_m df_bot_m" src="../../../static/img/default_iocn_2.jpg" alt="">
        <img class="default_bot_bt_m_2 df_bot_m"src="../../../static/img/default_iocn_3.jpg" alt="">
        <img src="../../../static/img/default_iocn_l.jpg" alt="" class="df_bot_last" v-on:click="go_back">
        <img src="../../../static/img/default_iocn_r.jpg" alt="" class="df_bot_last" v-on:click="go_next">
      </div>

    </div>
  </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import common from "../../common/common.js";
  import filter from "../../filter/filter.js";
  import new_header from "../new_ad_header/new_ad_header.vue"
  import default_card_show_1 from "../default_card_show/default_card_show_1.vue"
  import main_default_card from "../default_card_show/main_default_card.vue"
  import no_main_default_card from "../default_card_show/no_main_default_card.vue"
  //limit_Scroll
export default {
  name: 'hello',
  data () {
    return {
        sel_show_list:[true,false,false,false,false],
        num:1,
        opacity_data:0,
        no_empty:false
    }
  },
  ...mapActions([
    "thom_redirect",

  ]),

  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () {


  },
  methods: {
    next_step:function () {
      this.fade = false
    },
    pre_step:function () {

    },
    change_sel:function(num){
      this.sel_show_list.forEach((value,index,array)=>{
        Vue.set(this.sel_show_list, index, false)
      })
      this.main_show(num);
      this.num=num+1;
      Vue.set(this.sel_show_list, num, true);
    },
    main_show:function(num){
      num == 1 ? this.no_empty = true : this.no_empty = false;

      num!=0 ? this.opacity_data = 1 : this.opacity_data = 0;
    },
    go_back:function () {
      if(this.num == 0 )return;
      this.num=this.num-1;
      let num = this.num!=0 ? this.num-1 : this.num;
      this.change_sel(num);
    },
    go_next:function () {
      if(this.num == 5)return;
      this.num=this.num+1;
      this.change_sel(this.num-1);
    }
  },
  components: {
    new_header,
    default_card_show_1,
    main_default_card,
    no_main_default_card
  }
}
</script>d
<style scoped lang="scss">
  @import "../sass/default_card_show.scss";
  @import "../sass/ani.scss";
  .select_span{
    line-height: tovw(40);
  }
  .default_card_container{
    height: 100%;
    overflow-y: hidden;
  }
</style>
